<template>
    <!-- 电影展示组件 -->
    <div class="home-box">
        <div v-for="filmType in filmTypes" :key="filmType.typeId">
            <div class="list-name">
                <span>{{filmType.typeName}}</span>
                <!-- <span class="list-more" @click="getFilmByType(filmType.typeId,filmType.typeName)">更多 > </span> -->
                <!-- 无参数跳转 -->
                <!-- <router-link class="list-more" to="/page" tag="span">更多 > </router-link> -->
                <!-- get参数跳转 -->
                <!-- <router-link class="list-more"  tag="span"
                    :to="'/page?typeId='+filmType.typeId+'&typeName='+filmType.typeName"
                >更多 > </router-link> -->
                <!-- rest参数跳转 -->
                <!-- <router-link class="list-more" 
                    tag="span" :to="'/page/'+filmType.typeId+'/'+filmType.typeName+'.html'"
                >更多 > </router-link> -->
                <!-- rest 参数位置发生变化时做法 -->
                <!-- <router-link class="list-more" 
                    tag="span" :to="filmType.typeId+'/page/'+filmType.typeName+'.html'"
                >更多 > </router-link> -->
                <!-- rest参数--取值Object类型 -->
                <router-link class="list-more" 
                    tag="span" 
                    :to="{name:'page',params:{typeId:filmType.typeId,typeName:filmType.typeName+'.html'}}"
                >更多 > </router-link>
            </div>
            <!-- <film-list class="list-content" :list="filmType.list"></film-list> -->
            <filmList class="list-content" :filmList="filmType.list"></filmList>
        </div>
    </div>
</template>
<script>
import FilmList from "../components/filmList";
export default {
    components: {
        FilmList
    },
    data() {
        return {
            filmTypes: []
        };
    },
    methods: {
        // loadFilmType(){
        //     this.$api.loadTypes()
        //         .then(({resultState,result,msg})=>{
        //             // console.log(res);
        //         })
        //         .catch((error)=>{
        //             console.log(error);
        //         })
        // }
        async loadFilmType() {
            let { resultState, result, msg } = await this.$api.loadTypes();
            // console.log(res);
            if(!resultState){
                this.$error();
            }
            for (let i = 0, length = result.length; i < length; i++) {
                let res = await this.loadFilmByTypeId(result[i].typeId);
                result[i].list = res;
            }
            this.filmTypes = result;
        },
        async loadFilmByTypeId(id) {
            let { result } = await this.$api.loadFilms({
                typeId: id
            });
            return result;
        },
        // getFilmByType(id,name){
        //     this.$root.$emit("update:page","Page",id,name);
        // }
    },
    mounted() {
        // console.log(this.$parent);
        this.loadFilmType();
    }
};
</script>
<style lang="less" scoped>
// 首页样式
.home-box {
    position: absolute;
    top: 0rem;
    bottom: 0rem;
    left: 0rem;
    right: 0rem;
    overflow-y: auto;
}
.list-content {
    width: 100%;
    overflow-x: auto;
    white-space: nowrap;
    margin-bottom: 0.1rem;
    font-size: 0rem;
    &::after {
        content: "";
        width: 0.1rem;
        display: inline-block;
    }
}
</style>